<template>
  <div id="order-detail">
    <el-form :model="editInfo" label-width="100px">
      <div class="info">
        <div class="info-title">用户信息 <i class="el-icon-caret-right"></i></div>
        <div class="info-msg">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="姓名">
                <el-input v-model="editInfo.customerName" icon="edit"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="电话">
                <el-input v-model="editInfo.telephoneNo" icon="edit"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所在地">
                <el-cascader v-model="selected.selectedCity" :options="dataProvider.cities" :show-all-levels="true"
                  :props="props.cityProps"></el-cascader>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="详细地址">
                <el-input v-model="editInfo.address" icon="edit"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="下单标识">
                <el-select v-model="editInfo.orderIdentifier" placeholder="请选择">
                  <el-option v-for="item in dataProvider.orderIdentifierList" :label="item.PARAM_NAME"
                    :value="item.PARAM_VALUE" :key="item"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="info">
        <div class="info-title">故障信息 <i class="el-icon-caret-right"></i></div>
        <div class="info-msg">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="设备类型">
                <el-radio-group v-model="brandType">
                  <el-radio label="11">手机</el-radio>
                  <el-radio label="15">平板</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-col :span="12" style="padding-left:0;">
                <el-form-item label="品牌">
                  <el-cascader v-model="selected.selectedDevice" :options="dataProvider.devices" :show-all-levels="true"
                    :props="props.deviceProps" @change="brandchange"></el-cascader>
                </el-form-item>
              </el-col>
            </el-col>
            <div v-for="item in faltArray" :key="item">
              <el-col :span="10">
                <el-form-item label="故障名称">
                  <el-cascader placeholder="请先选择品牌" v-model="item.selectedFalt" :options="dataProvider.falts"
                    :show-all-levels="true" :props="props.failProps" @change="faltchange"></el-cascader>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="故障价格">
                  <el-input v-model="item.price" :value="item.price" icon="edit" @change="faltpricechange"
                    placeholder="请先选择品牌" :disabled="true"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-button type="primary" @click="deteleFlat(item.detid)">删除此故障</el-button>
              </el-col>
            </div>
            <el-col :span="12">
              <el-button type="primary" @click="addFlat">添加故障</el-button>
            </el-col>
            <el-col :span="12">
              <el-form-item label="预估总价">
                <el-input v-model="editInfo.price" icon="edit" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" :offset="12">
              <el-form-item label="实收">
                <el-input v-model="editInfo.actualPrice" icon="edit" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="info">
        <div class="info-title">订单信息 <i class="el-icon-caret-right"></i></div>
        <div class="info-msg">
          <el-row :gutter="20">
            <el-col :span="24">
              <el-col :span="12">
                <el-form-item label="服务方式">
                  <el-select v-model="editInfo.serviceType" placeholder="请选择">
                    <el-option label="上门" value="SM"></el-option>
                    <el-option label="到店" value="DD"></el-option>
                    <el-option label="寄送" value="JS"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item v-if="editInfo.serviceType == 'JS'" label="维修中心">
                  <el-select v-model="selected.selectedMainCenter" placeholder="维修中心">
                    <el-option v-for="item in dataProvider.centerList" :label="item.centerName" :value="item"
                      :key="item">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item v-if="editInfo.serviceType == 'DD'" label="店铺名称">
                  <el-select v-model="selected.selectedShopInfo" placeholder="店铺名称">
                    <el-option v-for="item in dataProvider.storeList " :label="item.shopName" :value="item" :key="item">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item v-if="editInfo.serviceType != 'JS'" label="预约时间">
                  <el-date-picker v-model="editInfo.date" type="date" placeholder="日期"></el-date-picker>
                  <el-time-select v-model="editInfo.startTime"
                    :picker-options="{start: '08:00', step: '01:00', end: '22:00'}" placeholder="开始时间"></el-time-select>
                  <el-time-select v-model="editInfo.endTime"
                    :picker-options="{start: '08:00', step: '01:00', end: '22:00'}" placeholder="结束时间"></el-time-select>
                </el-form-item>
              </el-col>
            </el-col>
            <el-col :span="12">
              <el-form-item label="用户备注">
                <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="editInfo.remark" icon="edit">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-form>
    <div slot="footer" class="dialog-footer" style="float: right; padding: 20px 0;">
      <el-button @click="canleadd">取消</el-button>
      <el-button type="primary" @click="save">保存</el-button>
    </div>
  </div>
</template>
<script>
  import r from '../../utils/RequestUtil'
  import moment from 'moment'
  export default {
    name: "add-order",
    data: function () {
      return {
        dataProvider: {
          cities: [],
          devices: [],
          falts: [],
          centerList: [],
          storeList: [],
          orderIdentifierList: []
        },
        props: {
          cityProps: {
            value: "provinceName",
            label: "provinceName",
            children: "children"
          },
          deviceProps: {
            value: "name",
            label: "name",
            children: "children"
          },
          failProps: {
            value: "label",
            label: "label",
            children: "children"
          },
          props: {
            value: "name",
            label: "name",
            children: "children"
          }
        },
        detid: 1,
        brandType: '11'
      }
    },
    watch: {
      'brandType': {
        deep: true,
        handler(newval) {}
      }
    },
    methods: {
      brandchange(value) {},
      faltchange(value) {
        if (this.dataProvider.falts != null && this.dataProvider.falts != "" && typeof this.dataProvider.falts !=
          "undefined") {
          for (let faltname of this.dataProvider.falts) {
            if (faltname.label === value[0]) {
              for (let falttype of faltname.children) {
                if (falttype.label === value[1]) {
                  for (let faltSolution of falttype.children) {
                    if (faltSolution.label === value[2]) {
                      for (let falttypeName of this.faltArray) {
                        if (falttypeName.selectedFalt[0] === value[0] && falttypeName.selectedFalt[1] === value[1] &&
                          falttypeName.selectedFalt[2] === value[2]) {
                          falttypeName.price = faltSolution.price;
                        }
                      }
                    }
                  }
                }
              }
            }
          }
          this.faltpricechange();
        } else {
          r.message("请先选择品牌", "warning");
        }
      },
      faltpricechange() {
        this.editInfo.price = 0;
        this.editInfo.actualPrice = 0;
        for (let faltprice of this.faltArray) {
          if (faltprice.price === null || faltprice.price === "") {
            faltprice.price = 0;
            this.editInfo.price += parseInt(faltprice.price);
          } else {
            this.editInfo.price += parseInt(faltprice.price);
          }
        }
        this.editInfo.actualPrice = this.editInfo.price;
      },
      addFlat: function () {
        for (let faltprice of this.faltArray) {
          if (faltprice.price == null || faltprice.price == "" || typeof faltprice.price == "undefined" || faltprice
            .price == 0) {
            r.message("您还有没选择的故障类型", "warning");
            return;
          }
        }
        this.faltArray.push({
          "detid": this.detid
        });
        this.detid = parseInt(this.detid + 1);
      },
      deteleFlat(delid) {
        if (this.faltArray.length > 0) {
          this.faltArray[delid].selectedFalt = [];
          this.faltArray[delid].price = 0;
        }
        this.faltpricechange();
      },
      save: function () {
        if (this.editInfo.customerName === null || this.editInfo.customerName === "") {
          r.message("请填写客户姓名", "warning");
          return;
        }
        if (this.editInfo.telephoneNo === null || this.editInfo.telephoneNo === "") {
          r.message("请填写客户联系方式", "warning");
          return;
        }
        if (this.selected.selectedCity.length === 0) {
          r.message("请选择地址", "warning");
          return;
        }
        if (this.editInfo.address === null || this.editInfo.address === "") {
          r.message("请填写详细地址", "warning");
          return;
        }
        if (this.editInfo.orderIdentifier === null) {
          r.message("请选择下单标识", "warning");
          return;
        }
        if (this.editInfo.price === null) {
          r.message("请填写预估价格", "warning");
          return;
        }
        if (this.selected.selectedDevice.length === 0) {
          r.message("请选择品牌型号", "warning");
          return;
        }

        if (this.editInfo.serviceType === null) {
          r.message("请选择服务方式", "warning");
          return;
        }

        let result = new Object();

        let orderService = new Object();
        if (this.editInfo.serviceType === "SM") {
          if (this.editInfo.date === null) {
            r.message("请选择日期", "warning");
            return;
          }
          if (this.editInfo.beginTime === null) {
            r.message("请选择开始时间", "warning");
            return;
          }
          if (this.editInfo.endTime === null) {
            r.message("请选择结束时间", "warning");
            return;
          }
          orderService.beginTime = moment(moment(this.editInfo.date).format('YYYY-MM-DD') + " " + this.editInfo
            .startTime).toDate()
          orderService.endTime = moment(moment(this.editInfo.date).format('YYYY-MM-DD') + " " + this.editInfo.endTime)
            .toDate()
        } else if (this.editInfo.serviceType === "DD") {
          if (this.selected.selectedShopInfo === null) {
            r.message("请选择维修中心", "warning");
            return;
          }
          orderService.shopId = this.selected.selectedShopInfo.id;
          orderService.shopName = this.selected.selectedShopInfo.shopName;
        } else {
          if (this.selected.selectedMainCenter === null) {
            r.message("请选择邮寄地址", "warning");
            return;
          }
          orderService.mainTainCenterId = this.selected.selectedMainCenter.id;
          orderService.mainTainCenterName = this.selected.selectedMainCenter.shopName;
        }

        result.orderService = orderService;
        let orderElement = new Object();
        orderElement.customerName = this.editInfo.customerName;
        orderElement.telephoneNo = this.editInfo.telephoneNo;
        orderElement.province = this.selected.selectedCity[0]
        orderElement.city = this.selected.selectedCity[1]
        orderElement.county = this.selected.selectedCity[2]
        orderElement.address = this.editInfo.address;
        result.orderElement = orderElement;
        result.brandName = this.selected.selectedDevice[0];
        result.modelName = this.selected.selectedDevice[1];
        result.deviceColor = this.selected.selectedDevice[2];
        result.serviceType = this.editInfo.serviceType;
        result.price = this.editInfo.price;
        result.actualPrice = this.editInfo.actualPrice;

        result.remark = this.editInfo.remark;
        result.wxsRemark = this.editInfo.wxsRemark;
        result.serviceRemark = this.editInfo.serviceRemark;
        result.orderPdysh = this.editInfo.orderIdentifier;

        let orderFailures = [];
        for (let faltlist of this.faltArray) {
          if (faltlist.price != null && faltlist.price != "" && typeof faltlist.price != "undefined" && faltlist
            .price != 0) {
            let temp = {};
            temp.failureSubName = faltlist.selectedFalt[1];
            temp.solution = faltlist.selectedFalt[2];
            temp.price = faltlist.price;
            orderFailures.push(temp);
          }
        }
        result.orderFailures = orderFailures;
        this.$emit("save", result);

      },
      canleadd() {
        this.$emit("canleadd");
      }
    },
    computed: {},
    props: {
      editInfo: {
        type: Object,
        required: true
      },
      selected: {
        type: Object,
        required: true
      },
      faltArray: {
        type: Array,
        required: true
      }
    },
    mounted: function () {}
  }

</script>

<style scoped="scoped">
  .item-wrap {
    display: flex;
    align-items: center;
    padding: 10px;
  }

  .label {
    font-size: 14px;
    width: 70px;
    padding: 0 8px;
    text-align: right;
  }

  .order-header {
    border-bottom: 2px solid #20A0FF;
    padding-bottom: 10px;
  }

  .wrap {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
  }

  .detail {
    padding-bottom: 20px;
  }

  .info {
    display: table;
    width: 100%;
    margin-top: 10px;
  }

  .info-title {
    display: table-cell;
    width: 80px;
    text-align: right;
    padding-right: 10px;
  }

  .info-msg {
    display: table-cell;
    margin-left: 100px;
    margin-right: auto;
  }

  .order-header {
    border-bottom: 2px solid #20A0FF;
    padding-bottom: 10px;
  }

  .condition-wrap {
    padding-right: 30px;
  }

  .el-select,
  .el-cascader {
    width: 100%;
  }

</style>
